<!DOCTYPE html>
<html>

<head>
    <META CHARSET="UTF-8">
    <title>宠物商店管理平台首页测试</title>
    <!-- 新 Bootstrap5 核心 CSS 文件 -->
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/css/bootstrap.min.css">
    <!-- 最新的 Bootstrap5 核心 JavaScript 文件 -->
    <script src="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/js/bootstrap.bundle.min.js"></script>
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
    <style>
        .mynav {}

        .mynav:hover {
            background-color: #9BAEBC;
        }

        .mycenter {
            transform: translateY(20%);
        }
    </style>
</head>

<body onload="init()">
<!--顶部框-->
<div class="header-container justify-content-center py-3 border-bottom">
    <div class="row">
        <div class="col-lg-9 text-left px-5">
            <a href="#" class="d-flex align-items-center mb-3 mb-md-0 me-md-auto text-dark text-decoration-none">
                <svg class="bi me-2" width="40" height="32">
                    <image width="40" height="32" xlink:href="../image/back.png"></image>
                </svg>
                <span class="fs-4">宠物商店商户平台</span>
            </a>
        </div>
        <div class="col-lg-3 text-center" >
            <button type="button" th:if="${session.userID}" class="btn btn-outline-primary me-2">登录</button>
            <button type="button" th:if="${session.userID}" class="btn btn-outline-primary">注册</button>
            <button type="button" th:if="${session.userID ne null}" id="btn-logout" class="btn btn-outline-primary">注销</button>
        </div>
    </div>
</div>
<!--顶部框结束-->
<!--页面主体-->
<div class="row">
    <!--侧边导航栏-->
    <div class="col-lg-2 bg-dark text-light nav nav-pills flex-column nav-justified"
         style="min-height: 90vh; padding: 0;">
        <div class="my-5" style="padding: 0;">
            <li class="nav-item" style="padding: 0;">
                <a class="nav-link text-light mynav" href="/index" style="padding: 0; background-color: #5F788A;">
                    <div class="border-bottom mx-auto" style="padding-top: 5%; min-height: 7vh;">首页</div>
                </a>
            </li>
            <li class="nav-item" style="padding: 0;">
                <a class="nav-link text-light mynav" href="/order" style="padding: 0;">
                    <div class="border-bottom mx-auto" style="padding-top: 5%; min-height: 7vh;">订单管理</div>
                </a>
            </li>
            <li class="nav-item" style="padding: 0;">
                <a class="nav-link text-light mynav" href="/itemManage" style="padding: 0;">
                    <div class="border-bottom mx-auto" style="padding-top: 5%; min-height: 7vh;">商品管理</div>
                </a>
            </li>
            <li class="nav-item" th:if="${session.admin}" style="padding: 0;" >
                <a class="nav-link text-light mynav" href="/userManage" style="padding: 0;">
                    <div class="border-bottom mx-auto" style="padding-top: 5%; min-height: 7vh;">用户管理</div>
                </a>
            </li>
        </div>
    </div>
    <!--侧边导航栏结束-->
    <!--主体部分开始-->
    <div class="col-lg-9" style="background-color: #F3F6F6;">
        <div class="row mycenter">
            <!--店铺信息卡片开始-->
            <div class="col-lg-4 d-flex justify-content-center">
                <div class="card border rounded-3 border-success" style="max-width: 18vw;" id="storeCard">
                    <!--店铺的首页图片-->
                    <img decoding="async" class="card-img-top" style="max-width: 18vw; max-height: 45vh;"
                         src="C:\Users\Administrator\Pictures\卡牌DIY\3.jpg" id="storeImage">
                    <div class="card-body">
                        <h4 class="card-title" id="StoreName">店铺的名称显示在这里</h4>
                        <p class="card-text" id="StoreIntroduce">店铺的简单介绍显示在这里</p>
                        <button type="button" class="btn btn-primary" data-bs-toggle="modal"
                                data-bs-target="#editCard" id="editCardButton">编辑名片</button>
                    </div>
                </div>
            </div>
            <!--店铺信息卡片结束-->

            <!--店铺详细信息开始-->
            <div class="col-lg-8" style="background-color: white;">

                <div class="row  mt-4">
                    <div class="col-md-8 align-self-center">
                        <h1>店铺详细信息</h1>
                    </div>
                    <div class="col-md-4 align-self-center">
                        <button type="button" class="btn btn-primary" data-bs-toggle="modal"
                                data-bs-target="#editInfo" id="editInfoButton">编辑详细信息</button>
                    </div>
                </div>

                <table class="table table-striped table-bordered table-hover mt-1">
                    <tbody>
                    <tr>
                        <!--芝士表头-->
                        <td><b>经营者</b></td>
                        <td id="managerInfo">经营者信息</td>
                    </tr>
                    <tr>
                        <!--芝士表头-->
                        <td><b>商铺地址</b></td>
                        <td id="locationInfo">商铺地址信息</td>
                    </tr>
                    <tr>
                        <!--芝士表头-->
                        <td><b>商家联系方式(电话)</b></td>
                        <td id="phoneInfo">电话信息</td>
                    </tr>
                    <tr>
                        <!--芝士表头-->
                        <td><b>商家联系方式(邮箱)</b></td>
                        <td id="emailInfo">邮箱信息</td>
                    </tr>
                    <tr>
                        <!--芝士表头-->
                        <td><b>认证状态</b></td>
                        <td id="validateInfo">未认证</td>
                    </tr>
                    </tbody>
                </table>
            </div>
            <!--店铺详细信息结束-->
        </div>
    </div>
    <div class="col-lg-1" style="background-color: #F3F6F6;"></div>
    <!--主体部分结束-->
</div>
<!--页面主体结束-->

<!--模态框组件开始-->
<!--编辑名片模态框开始-->
<div class="modal" data-bs-backdrop="static" id="editCard">
    <div class="modal-dialog">
        <div class="modal-content">
            <!-- 模态框头部开始 -->
            <div class="modal-header">
                <h4 class="modal-title">编辑店铺名片</h4>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <!--模态框头部结束-->
            <!-- 模态框内容开始-->
            <div class="modal-body">
                <form method="post" action="#" enctype="multipart/form-data">

                    <div class="row mt-2">
                        <div class="col-5 text-center">
                            店铺名称:
                        </div>
                        <div class="col-7">
                            <input type="text" id="inputStoreName" name="storeName" placeholder="店铺名称">
                        </div>
                    </div>
                    <div class="row mt-2">
                        <div class="col-5 text-center">
                            店铺简介:
                        </div>
                        <div class="col-7">
                            <input type="text" id="inputStoreInfo" name="storeInfo" placeholder="店铺简介(15字以内)">
                        </div>
                    </div>
                    <div class="row mt-2">
                        <div class="col-5 text-center">
                            店铺封面:
                        </div>
                        <div class="col-7">
                            <input type="file" id="inputStoreImage" name="inputStoreImage"
                                   accept="image/bmp, image/jpeg, image/png, image/jpg" onchange="editItemImage(event)">
                        </div>
                    </div>
                    <div class="row mt-4 mx-auto px-5">
                        <button type="button" class="btn btn-success" onclick="onStoreCardSummit()">提交</button>
                    </div>
                </form>
            </div>
            <!-- 模态框内容结束-->
        </div>
    </div>
</div>
<!--编辑名片模态框结束-->
<!--编辑详细详细模态框开始-->
<div class="modal" data-bs-backdrop="static" id="editInfo">
    <div class="modal-dialog">
        <div class="modal-content">
            <!-- 模态框头部开始-->
            <div class="modal-header">
                <h4 class="modal-title">编辑详细信息</h4>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <!--模态框头部结束-->
            <!-- 模态框内容开始-->
            <div class="modal-body">
                <form method="post" action="#" enctype="multipart/form-data">
                    <div class="row mt-2">
                        <div class="col-5 text-center">
                            经营者:
                        </div>
                        <div class="col-7">
                            <input type="text" id="managerName" name="managerName" placeholder="经营者信息">
                        </div>
                    </div>
                    <div class="row mt-2">
                        <div class="col-5 text-center">
                            商铺地址:
                        </div>
                        <div class="col-7">
                            <input type="text" id="storeLocation" name="storeLocation" placeholder="您所在的地址">
                        </div>
                    </div>
                    <div class="row mt-2">
                        <div class="col-5 text-center">
                            商家联系方式(电话):
                        </div>
                        <div class="col-7">
                            <input type="text" id="storePhone" name="storePhone" placeholder="您的电话">
                        </div>
                    </div>
                    <div class="row mt-2">
                        <div class="col-5 text-center">
                            商家联系方式(邮箱):
                        </div>
                        <div class="col-7">
                            <input type="email" id="storeEmail" name="storeEmail" placeholder="您的邮箱">
                        </div>
                    </div>

                    <div class="row mt-4 mx-auto px-5">
                        <button type="button" class="btn btn-success" onclick="onConcreteInfoSummit()">提交</button>
                    </div>
                </form>
            </div>
            <!-- 模态框内容结束-->
        </div>
    </div>
</div>
<!--编辑详细详细模态框结束-->
<!--模态框组件结束-->
<!--提示框开始-->
<div id="successAlert" class="alert alert-success fixed-top alert-dismissible invisible">
    <button type="button" class="btn-close" onclick="hideAlert('successAlert')"></button>
    <p id="successAlertText"><!--这里显示成功的信息--></p>
</div>
<div id="failAlert" class="alert alert-danger fixed-top alert-dismissible invisible">
    <button type="button" class="btn-close" onclick="hideAlert('failAlert')"></button>
    <p id="failAlertText"><!--这里显示失败的信息--></p>
</div>
<!--提示框结束-->
</body>
<script src="/javascripts/indexScripts.js"></script>
</html>